<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance, TableColumnData } from '@arco-design/web-vue'
import useOptions from '@/hooks/useOptions'
const props = defineProps<{
  show: boolean
  id: any[]
}>()
console.log('🚀 ~ props:', props)
const emit = defineEmits(['update:show', 'confirm'])
const formRef = ref() as Ref<FormInstance>

const detail = reactive({
  logisticsCode: '',
  logisticsName: '',
  logisticsNo: '',
  orderId: props.id.join(','),
})
const { options } = useOptions({ api: '/server-open/dict/list', fieldName: { label: 'dictValue', value: 'dictKey' }, query: { code: 'express' } })
const onChange = e => {
  const [item] = options.value.filter(f => f.value == e)
  detail.logisticsName = item.label
}

const submit = done => {
  console.log(detail)

  // done(false)
  // return
  formRef.value.validate(err => {
    if (!err) {
      post(
        { url: '/server-shop/admin/order/logistics/batch/save', data: detail },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          emit('update:show', false)
          emit('confirm')
          done(true)
        },
        () => done(false)
      )
    } else done(false)
  })
}
</script>
<template>
  <CModal v-model:visible="props.show" width="500px" @before-ok="submit" :mask-closable="false" title="订单发货" @cancel="emit('update:show', false)">
    <a-space direction="vertical" style="width: 100%">
      <a-form :model="detail" ref="formRef">
        <a-form-item label="物流公司" field="logisticsName" :rules="[{ required: true, message: '请选择物流公司' }]" :validate-trigger="['change', 'blur']">
          <a-select :options="options" v-model="detail.logisticsCode" placeholder="请选择" @change="onChange" />
        </a-form-item>
        <a-form-item label="物流单号" field="logisticsNo" :rules="[{ required: true, message: '请输入物流单号' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.logisticsNo" placeholder="请输入物流单号" />
        </a-form-item>
      </a-form>
    </a-space>
  </CModal>
</template>
<style lang="less" scoped>
.content {
  background: #f2f5f9;
  padding: 10px;
  flex: 2;
}
.order-num {
  font-size: 12px;
}
</style>
